<script>
  import $ from '../dfish.js'
  import TableAbs from './TableAbs.vue'
  import {
    h
  } from 'vue'
  import ResizeObserver from 'resize-observer-polyfill'

  export default {
    mixins: [TableAbs],
    inject: ['table'],
    data() {
      return {
        fixed: 'left',
        fixedWidth: null,
        fixedHeight: null,
      }
    },
    created() {
      this.init()
    },
    methods: {
      init() {
        this.table.setLeftTable(this)
      },
      observeWidth() {
        if (!this.$el) return
        let fixedCells = this.$el.querySelectorAll(`:scope > .w-thead thead td[w-fixed="${this.fixed}"]`)
        let width = 0
        $.lodash.each(fixedCells, v => width += v.offsetWidth)
        this.fixedWidth = width
      },
      html_slots() {
        return [this.slotHooks.thead, this.slotHooks.tbody, this.slotHooks.hiddens]
      }
    },
    computed: {
      html_class() {
        return 'w-table-fixed-' + this.fixed + ' f-flex-column'
      },
      html_style() {
        return {
          width: this.fixedWidth + 'px',
          height: this.fixedHeight + 'px',
        }
      }
    },
    mounted() {
      let fixedCells = this.$el.querySelectorAll(`:scope > .w-thead thead td[w-fixed="${this.fixed}"]`)
      $.lodash.each(fixedCells, v => new ResizeObserver(this.observeWidth).observe(v))
    }
  }
</script>

<style>

</style>
